    document.addEventListener('DOMContentLoaded', function() {
    // DOM元素
    const rankingList = document.getElementById('ranking-list');
    const totalUsersEl = document.getElementById('total-users');
    const refreshBtn = document.getElementById('refresh-btn');
    const tabButtons = document.querySelectorAll('.tab-btn');

    // 当前选中的排行榜类型
    let currentType = 'daily';

    // 初始化页面
    initTabs();
    loadRankingData(currentType);

    // 刷新按钮事件
    if(refreshBtn) {
    refreshBtn.addEventListener('click', () => {
    loadRankingData(currentType);
});
}

    // 初始化标签页
    function initTabs() {
    tabButtons.forEach(btn => {
    btn.addEventListener('click', function() {
    // 更新选中状态
    tabButtons.forEach(b => b.classList.remove('active'));
    this.classList.add('active');

    // 加载对应数据
    currentType = this.dataset.type;
    loadRankingData(currentType);
});
});
}

    // 加载排行榜数据
    async function loadRankingData(type) {
    try {
    // 显示加载状态
    rankingList.innerHTML = '<div class="loader">加载中...</div>';

    // 调用API
    const response = await fetch(`/api/ranking?type=${type}`);

    if (!response.ok) {
    throw new Error(`请求失败: ${response.status}`);
}

    const result = await response.json();

    if (result.success) {
    // 更新统计数据
    if(totalUsersEl) {
    totalUsersEl.textContent = result.data.totalUsers || '--';
}

    // 渲染排行榜
    renderRankingList(result.data.users || []);
} else {
    throw new Error(result.message || '获取数据失败');
}
} catch (error) {
    console.error('加载排行榜出错:', error);
    showError(error.message);
}
}

    // 渲染排行榜列表
    function renderRankingList(users) {
    // 清空容器
    rankingList.innerHTML = '';

    // 处理空数据情况
    if (!users || users.length === 0) {
    rankingList.innerHTML = '<div class="no-data">暂无排名数据</div>';
    return;
}

    // 生成排名列表
    users.forEach((user, index) => {
    const rankItem = document.createElement('div');
    rankItem.className = 'rank-item';

    // 前3名特殊样式
    const isTopRank = index < 3;
    const rankClass = isTopRank ? 'top-rank' : '';

    rankItem.innerHTML = `
                    <div class="rank-number ${rankClass}">${index + 1}</div>
                    <div class="rank-avatar">${(user.username || '').charAt(0).toUpperCase()}</div>
                    <div class="rank-info">
                        <div class="rank-name">
                            ${user.username || '未知用户'}
                            ${user.userType === 'admin' ? '<span class="admin-badge">管理员</span>' : ''}
                        </div>
                        <div class="rank-score">得分: ${user.score || 0}</div>
                    </div>
                    ${isTopRank ? '<div class="rank-badge">TOP</div>' : ''}
                `;

    rankingList.appendChild(rankItem);
});
}

    // 显示错误信息
    function showError(message) {
    rankingList.innerHTML = `
                <div class="error-message">
                    <p>${message || '加载失败'}</p>
                    <button class="btn" onclick="window.location.reload()">重新加载</button>
                </div>
            `;
}
});
